<template>
  <Layout style="height: 100%" class="main">
    <!-- 头部 -->
    <!-- <Header class="header-con">
      <div class="header-bar">
        <img :src="maxLogo" key="max-logo" style="float: left;"/>
        <p class="navTitle">Basic</p>
        <div class="custom-content-con">
          <Tooltip :content="$t('logout')" placement="bottom">
            <div class="customIcon" @click="logout">
              <div class="icon out"><Icon type="md-power" :size="16"/></div>
            </div>
          </Tooltip>
          <Tooltip :content="$t('account')" placement="bottom" class="m-10">
            <div class="customIcon m-5">
              <svg class="icon headerIcon" aria-hidden="true">
                <use xlink:href="#icon-yonghu"></use>
              </svg>
            </div>{{ account }}
          </Tooltip>
          <language @on-lang-change="setLocal" class="m-10" :lang="local"/>
          <fullscreen v-model="isFullscreen" class="m-10" @on-change="fullscreenChange"/>
        </div>
      </div>
    </Header> -->
    <Layout>
      <!-- 菜单 999 -->
      <Sider hide-trigger collapsible :width="220" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
        <side-menu accordion ref="sideMenu" :active-name="activeMenu" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList" @on-coll-change="handleCollapsedChange">
        </side-menu>
        <!-- <Button type="primary" class="languageBtn">
          <language @on-lang-change="setLocal" class="m-10" :lang="local"/>
        </Button> -->
      </Sider>
      <!-- 容器 -->
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <!-- <div class="tag-nav-wrapper"> -->
            <!-- <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/> -->
          <!-- </div> -->
          <Content class="content-wrapper box">
            <keep-alive :include="cacheList">
              <router-view/>
            </keep-alive>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
// import CommonIcon from '_c/common-icon'
// import maxLogo from '@/assets/images/logo-min.jpg'
import SideMenu from './components/side-menu'
// import TagsNav from './components/tags-nav'
// import Fullscreen from './components/fullscreen'
// import Language from './components/language'
import { mapMutations } from 'vuex'
// import { getNewTagList, getNextRoute, routeEqual, delToken } from '@/libs/util'
import { delToken } from '@/libs/util'
import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu
    // TagsNav
    // Language
    // Fullscreen
    // CommonIcon
  },
  data () {
    return {
      // maxLogo,
      collapsed: false,
      isFullscreen: false,
      isActive: false,
      activeMenu: 'home'
      // account: sessionStorage.getItem('account')
    }
  },
  computed: {
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvator () {
      return this.$store.state.user.avatorImgPath
    },
    cacheList () {
      return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
    },
    menuList () {
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    }
  },
  methods: {
    localChange () {
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              'class': 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', '语言切换中...')
          ])
        }
      })
      setTimeout(() => {
        this.$Spin.hide()
      }, 2000)
    },
    logout () {
      this.setUserId()
      delToken()
      this.setAccess([])
      // this.setTagNavList([])
      localStorage.clear()
      sessionStorage.clear()
      // 刷新页面，通过路由拦截跳转到login页
      location.reload()
      // stop()
    },
    ...mapMutations([
      // 'setTagNavList',
      // 'addTag',
      'setLocal',
      'setUserId',
      'setAccess',
      'setMenuList'
    ]),
    turnToPage (route) {
      console.log(route)
      this.activeMenu = route
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    // 菜单展开收起
    handleCollapsedChange (state) {
      this.collapsed = state
      this.isActive = !this.isActive
      this.$store.state.app.menuCollapsed = state
    },
    // handleCloseTag (res, type, route) {
    //   let openName = ''
    //   if (type === 'all') {
    //     this.turnToPage('home')
    //     openName = 'home'
    //   } else if (routeEqual(this.$route, route)) {
    //     if (type === 'others') {
    //       openName = route.name
    //     } else {
    //       const nextRoute = getNextRoute(this.tagNavList, route)
    //       this.$router.push(nextRoute)
    //       openName = nextRoute.name
    //     }
    //   }
    //   this.setTagNavList(res)
    //   this.$refs.sideMenu.updateOpenName(openName)
    // },
    // handleClick (item) {
    //   this.turnToPage(item)
    // },
    // fullscreenChange (isFullScreen) {
    //   return (this.$store.state.app.isFullScreen = isFullScreen)
    // },
    scrollHeight () { // 计算高度，设置滚动条位置到容器最底部以展示对话内容
      this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight - this.$refs.msgBox.clientHeight
    },
    modalCancel (e) {
      if (e === false) {
        this.setCurrent('')
      }
    }
  },
  // watch: {
  //   '$route' (newRoute) {
  //     this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
  //   }
  // },
  mounted () {
    console.log(this.menuList)
    // this.setTagNavList()
    // this.addTag({
    //   route: this.$store.state.app.homeRoute
    // })
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
  }
}
</script>
